<template>
  <div :style='{ "width": "100%", "padding": "30px 7% 40px", "margin": "0px auto", "position": "relative", "background": "none" }'>
    <div class="section-title"
      :style='{ "padding": "12px 0 0", "border-radius": "15px", "margin": "0px auto", "color": "#1b394c", "textAlign": "left", "background-color": "skyblue", "width": "100%", "fontSize": "24px", "fontWeight": "600", "height": "60px" }'>
      <span style="color: white;font-size:16px;margin-left: 10px;">关于{{ form.exampaperName }}</span>
      <el-button size="mini"
        style="float:right;margin-right:10px;margin-top:5px;background-color: red;border-radius:10px;color: white;position: relative;top: 5px right: 5px;"
        @click="backClick">结束问卷调查</el-button>
    </div>
    <div v-if="isOver" style="width: 100%;color:rgb(0, 255, 85);height:100px;font-size:20px;line-height:100px;text-align:center;">
      问卷调查已结束，{{ form.exampaperJieshuyu }}
      <el-button type="default" style="float: right;position: relative; left: -600px;top:100px"
        @click="backClick">返回</el-button>
    </div>
    
    <el-form v-else class="add-update-preview" :model="qu" ref="form" label-width="180px">
      <el-form-item
        :style='{ "width": "100%", "padding": "10px", "margin": "0 0 10px", "background": "none", "display": "inline-block" }'
        label="题目" prop="examquestionId">（{{ qu.examquestionTypes == 1 ? '单选题' : '多选题' }}）{{ qu.examquestionName }}
        <!-- <el-input v-model="form.title" placeholder="请输入标题"></el-input> -->
      </el-form-item>
      <el-form-item
        :style='{ "width": "100%", "padding": "10px", "margin": "0 0 10px", "background": "none", "display": "inline-block" }'
        label="选项" prop="qusOptions">
        <el-select v-model="qusOptions" multiple clearable @change="mychanged" placeholder="请选择">
          <el-option v-for="(item, index) in qu.qusOptions" 
            :key="index" 
            :label="item" 
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="">
        <el-button type="primary" style="float: left;" v-show="isFirst"
        @click="preBtn">上一题</el-button>
        <el-button type="primary" style="float: right;position: relative; left: -900px;" v-if="isLast"
        @click="nextBtn">下一题</el-button>
        <el-button type="success" style="float: right;position: relative; left: -900px;" v-else="isLast"
        @click="submitForm('form')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  //数据集合
  data() {
    return {
      endTime: Date.now() + 60000, // 假设计时60秒
      timer: null,
      form: {
        exampaperName: '',
        exampaperTypes: 0,
        exampaperJieshuyu: '',
        exampaperDate: 0,
        examquestions:[],
        userid: localStorage.getItem('frontUserid'),
      },
      qu:{
        examquestionTypes:0,
        qusOptions: [],
      },
      myForm: {
        exampaperId:this.$route.query.id,
        exampaperDetails:[]
      },

      exampaperDetail:{
        examquestionId:'',
        examredetailsMyanswer:''
      },

      totalPage:0,
      currPage:0,
      isFirst:false,
      isLast:true,

      isOver:false
    }
  },
  
  created() {
    if (this.$route.query.id != undefined) {
      this.$http.get('exampaper/get/' + this.$route.query.id, {}).then(res => {
        if (res.data.code == 0) {
          this.form = res.data.data
          this.qu = res.data.data.examquestions[this.currPage]
          this.qu.qusOptions = res.data.data.examquestions[this.currPage].examquestionOptions.split(",")
          this.totalPage = res.data.data.examquestions.length - 1
        }
      })
    }
  },
  computed: {
    
    remainingTime() {
      const remaining = this.endTime - Date.now();
      if (remaining <= 0) {
        this.clearTimer();
        return '00:00';
      }
      const minutes = this.padTime((remaining / 1000 / 60) | 0);
      const seconds = this.padTime((remaining / 1000) % 60);
      return `${minutes}:${seconds}`;
    },
  },
  mounted() {
    this.startTimer();
  },
  beforeDestroy() {
    this.clearTimer();
  },
  //方法集合
  methods: {
    mychanged(value) {
      this.myForm.exampaperDetails[this.currPage] = {
        examredetailsMyanswer:value.map(x=>{return x.split(".")[0]}).join(", "),
        examquestionId:this.form.examquestions[this.currPage].id
      }
    },
    preBtn() {
      this.currPage = this.currPage - 1
      this.qu.qusOptions = ""
      this.qu = this.form.examquestions[this.currPage]
      this.qu.qusOptions = this.qu.examquestionOptions.split(",")
      this.isLast = true
      if(this.currPage == 0) this.isFirst = false
    },
    nextBtn() {
      this.currPage = this.currPage + 1
      this.qu.qusOptions = ""
      this.qu = this.form.examquestions[this.currPage]
      this.qu.qusOptions = this.qu.examquestionOptions.split(",")
      this.isFirst = true
      if(this.currPage == this.totalPage) this.isLast = false
    },
    padTime(value) {
      return value.toString().padStart(2, '0');
    },
    startTimer() {
      this.timer = setInterval(() => {
        // 强制Vue重新计算依赖
        this.$forceUpdate();
      }, 1000);
    },
    clearTimer() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    // 返回按钮
    backClick() {
      history.back()
    },
    
    submitForm(formName) {
      console.log(this.myForm)
      this.$http.post('examrecord/saveExamrecord', this.myForm).then(res => {
        if (res.data.code === 0) {
          this.$message({
            message: '提交问卷成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.isOver = true
            }
          });
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.add-update-preview .el-form-item /deep/ .el-form-item__label {
  padding: 0 10px 0 0;
  color: #666;
  font-weight: 500;
  width: 180px;
  font-size: 14px;
  line-height: 40px;
  text-align: right;
}

.add-update-preview .el-form-item /deep/ .el-form-item__content {
  margin-left: 180px;
}

.add-update-preview .el-input /deep/ .el-input__inner {
  border-radius: 30px;
  padding: 0 12px;
  box-shadow: 0 0 0px rgba(64, 158, 255, .5);
  color: #666;
  background: #fff;
  width: auto;
  font-size: 14px;
  border-color: #eee;
  border-width: 1px;
  border-style: solid;
  min-width: 300px;
  height: 40px;
}

.add-update-preview .el-select /deep/ .el-input__inner {
  border-radius: 30px;
  padding: 0 10px;
  color: #666;
  background: #fff;
  width: auto;
  font-size: 14px;
  border-color: #eee;
  border-width: 1px;
  border-style: solid;
  min-width: 350px;
  height: 40px;
}

.add-update-preview .el-date-editor /deep/ .el-input__inner {
  border-radius: 30px;
  padding: 0 10px 0 30px;
  color: #666;
  background: #fff;
  width: auto;
  font-size: 14px;
  border-color: #eee;
  border-width: 1px;
  border-style: solid;
  min-width: 350px;
  height: 40px;
}

.add-update-preview /deep/ .el-upload--picture-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  width: auto;
  height: auto;
  line-height: initial;
  vertical-align: middle;
}

.add-update-preview /deep/ .upload .upload-img {
  cursor: pointer;
  color: #999;
  font-weight: 600;
  font-size: 24px;
  border-color: #eee;
  line-height: 60px;
  border-radius: 20px;
  background: #fff;
  width: 120px;
  border-width: 1px;
  border-style: solid;
  text-align: center;
  height: 60px;
}

.add-update-preview /deep/ .el-upload-list .el-upload-list__item {
  cursor: pointer;
  color: #999;
  font-weight: 600;
  font-size: 24px;
  border-color: #eee;
  line-height: 60px;
  border-radius: 20px;
  background: #fff;
  width: 120px;
  border-width: 1px;
  border-style: solid;
  text-align: center;
  height: 60px;
}

.add-update-preview /deep/ .el-upload .el-icon-plus {
  cursor: pointer;
  color: #999;
  font-weight: 600;
  font-size: 24px;
  border-color: #eee;
  line-height: 60px;
  border-radius: 20px;
  background: #fff;
  width: 120px;
  border-width: 1px;
  border-style: solid;
  text-align: center;
  height: 60px;
}

.add-update-preview .el-textarea /deep/ .el-textarea__inner {
  border: 1px solid #eee;
  border-radius: 20px;
  padding: 12px;
  box-shadow: 0 0 0px rgba(64, 158, 255, .5);
  outline: none;
  color: #666;
  background: #fff;
  width: auto;
  font-size: 14px;
  min-width: 800px;
  height: 120px;
}</style>
